<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/jiazai.css" />
		<style type="text/css">
			body {
				background: white;
			}
			
			#top-contr {
				padding: 10px 20px;
			}
			
			.content {
				padding: 30px 20px;
			}
			
			.imp-tit-wrap>span {
				flex: 1 1 0;
				padding-bottom: 15px;
				font-size: 15px;
				color: #999;
				text-align: center;
				border-bottom: 1px solid #eee;
			}
			
			.imp-tit-wrap>.imp-tit-active {
				color: #0c61ff;
				border-bottom: 1px solid #0C61FF;
			}
			
			.input-notice {
				margin: 30px auto;
				font-size: 14px;
				text-align: center;
			}
			
			.input-notice>p:first-of-type {
				padding-bottom: 5px;
			}
			
			h1 {
				font-size: 22px;
				font-weight: 800;
				text-align: center;
			}
			
			.content>p:first-of-type {
				padding-top: 30px;
				font-size: 14px;
				line-height: 22px;
				letter-spacing: 1px;
				text-align: center;
			}
			
			.content>p:last-of-type {
				text-align: center;
			}
			
			.word {
				margin-top: 20px;
				min-height: 150px;
				padding: 15px;
				background: #f5f8ff;
				font-size: 16px;
				color: #999;
				border: none;
			}
			
			button {
				width: 100%;
				margin-top: 50px;
				padding: 15px 0;
				font-size: 15px;
				color: white;
				background: #0c61ff;
				border-radius: 5px;
				border: none;
			}
			#bottom {
				position: fixed;
				bottom: 40px;
				left: 0;
				right: 0;
				font-size: 15px;
				text-align: center;
				letter-spacing: 1px;
				color: #0C61FF;
			}
		</style>
	</head>

	<body>
		<div id="app">

			<!-- 加载中动画 -->
			<div id='jiazai-ani' v-if='jiazai'>
				<div class="arc"></div>
				<h1><span>LOADING</span></h1>
			</div>
			<!-- 加载中动画 -->

			<div id="top-contr" class='dis-spa'>
				<img @tap='_close();' src="img/left.svg" style="width: 18px;height: 18px;" />
				<span>导入钱包</span>
				<span style="opacity: 0;width: 18px;">1</span>
			</div>
			<div class="content">
				<div class="dis-spa imp-tit-wrap">
					<span @tap='offImMe="word"' :class="{'imp-tit-active':offImMe=='word'?true:false}">助记词导入</span>
					<span @tap='offImMe="key"' :class="{'imp-tit-active':offImMe=='key'?true:false}">私钥导入</span>
				</div>
				<div class="input-notice">
					<p v-text='fontJson.fo1'>按顺序输入助记词</p>
					<p v-text='fontJson.fo2'>助记词之间请用"，"隔开</p>
				</div>
				<textarea class="word" :placeholder="fontJson.fo3" v-model='input'>
					
				</textarea>
				<button @tap='sureIm'>确认导入</button>
			</div>
			<div id="bottom" @tap="_openHref({url:'create-wallet.html',id:'createWallet'});">
				创建钱包
			</div>
		</div>
		<script src="js/comm.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					jiazai: false,
					//word:助记词导入  key:私钥导入
					offImMe: 'word',
					//提示的文字
					fontJson:{
						fo1:'按顺序输入助记词',
						fo2:'助记词之间请用","隔开',
						fo3:'在此输入助记词'
					},
					//输入的助记词或私钥
					input:''
				},
				watch:{
					offImMe:function(val){
						if(val=='word'){
							this.fontJson={
								fo1:'按顺序输入助记词',
								fo2:'助记词之间请用","隔开',
								fo3:'在此输入助记词'
							};
						}else{
							this.fontJson={
								fo1:'请输入正确私钥',
								fo2:'如未导出私钥，请选择助记词导入',
								fo3:'在此输入私钥'
							};
						}
					}
				},
				methods: {
					//确认导入
					sureIm: function() {
						_openHref({
							url: 'reset-pin.html',
							id: 'resetPin'
						});
					}
				}
			});
		</script>
	</body>

</html>